<template>
  <div class="app-container">

    <div class="comment">
      <div class="comment-nav-tabs">
        <div class="comment-nav-item" :class="{ active: currentIndex===index }" v-for="(item,index) in navItems" :key="index" @click="onActive(index)">
          {{ item }}
        </div>
      </div>
      <div class="comment-tab-content">
        <div class="comment-item-content">
          <h3>评论管理待实现</h3>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: ['我的文章评论', '待我审核的评论', '我发表的评论'],
      currentIndex: 0
    }
  },
  methods: {
    onActive(index) {
      this.currentIndex = index
    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .comment {
    font-weight: 500;
    text-align: left;
    color: rgb(0, 0, 0);
    padding: 4px 24px 24px;

    .comment-nav-tabs {
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      border-bottom: 1px solid rgb(233, 233, 233);

      .comment-nav-item {
        cursor: pointer;
        margin-right: 24px;
        font-size: 0.875rem;
        color: rgb(153, 153, 153);
        padding: 0px 0px 14px;
        border-bottom: 2px solid transparent;
      }

      .active {
        color: rgb(77, 77, 77);
        border-bottom-color: rgb(202, 12, 22);
        background-color: transparent;
        border-radius: 0px;
      }
    }

    .comment-tab-content {
      max-width: 972px;

      .comment-list-box {
        display: flex;
        min-height: 83px;
        color: rgb(79, 79, 79);
        font-size: 14px;
        line-height: 22px;
        padding: 7px 0 12px;
        border-bottom: 1px dashed rgb(221, 221, 221);

        .comment-item-content {
          -webkit-box-flex: 1;
          margin-left: 10px;
          flex: 1 1 0;
        }
      }
    }
  }
</style>

